import React, { useState, memo } from 'react';
import { Row, Col, Modal, message, Input } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import EmptyCenter from '@/components/EmptyCenter';
import useModel from '../../useModels/useModel.js';
import Connect from '@/components/Connect';
import vkbeautify from 'vkbeautify';
import CodeMirror from '../../../MessageTemplate/components/xmlEdit/codeMirror.jsx';

export default Connect(state => {
  return {
    messageDetailVisible: state.messageDetailVisible,
    item: state.messageDetailItem,
  };
}, useModel)(
  memo(props => {
    const { messageDetailVisible, item, setState } = props;

    const handleOk = async e => {
      setState({
        messageDetailVisible: false,
      });
    };

    const handleCancel = e => {
      setState({
        messageDetailVisible: false,
      });
    };

    return (
      <Modal
        className={styles['modal-wrap']}
        title={
          <span>
            {/* {item.suId && <span className={styles['keyword-title']}>{item?.suId}</span>}
            <span>设备</span>
            {item.name && <span className={styles['keyword-title']}>{`-${item?.name}`}</span>} */}
            <span>报文结果</span>
          </span>
        }
        width={800}
        footer={null}
        visible={messageDetailVisible}
        // onOk={handleOk}
        // okText={'确认'}
        // onCancel={'取消'}
        destroyOnClose={true}
        onCancel={handleCancel}
      >
        <div className={styles['editor']}>
          <CodeMirror
            code={
              item.request ? vkbeautify.xml((item.request + item.response).replace(/\s/g, ' ')) : ''
            }
            readOnly={true}
          />
        </div>
      </Modal>
    );
  }),
);
